<template>
    <div class="login-container" :style="bgStyle">
      <div class="login-mask"></div>
      
      <div class="login-wrapper">
        <div class="login-header">
          <h1 class="logo">进销存系统</h1>
          <div class="theme-switch">
            <el-tooltip 
              v-for="(item, index) in themes" 
              :key="index" 
              :content="item.name"
            >
              <div 
                class="theme-item" 
                :style="{ backgroundImage: `url(${item.bg})` }"
                @click="changeTheme(index)"
              ></div>
            </el-tooltip>
          </div>
        </div>
        
        <el-card class="login-box">
          <div class="login-title">欢迎登录</div>
          <el-form>
            <el-form-item>
              <el-input
                v-model="form.username"
                placeholder="请输入用户名"
                prefix-icon="User"
                size="large"
              />
            </el-form-item>
            
            <el-form-item>
              <el-input
                v-model="form.password"
                type="password"
                placeholder="请输入密码"
                prefix-icon="Lock"
                size="large"
                show-password
              />
            </el-form-item>
            
            <el-form-item>
              <el-button 
                type="primary" 
                size="large" 
                class="login-btn"
                @click="handleLogin"
              >
                立即登录
              </el-button>
            </el-form-item>
          </el-form>
          
          <div class="login-footer">
            <el-link type="info">忘记密码</el-link>
            <el-link type="primary" @click="$router.push('/register')">
              立即注册
            </el-link>
          </div>
        </el-card>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  import { useRouter } from 'vue-router'
  import { useUserStore } from '@/stores/user'
  import { ElMessage, ElLoading } from 'element-plus'
  
  const router = useRouter()
  const userStore = useUserStore()
  
  // 主题配置
  const themes = ref([
    {
      name: '默认主题',
      bg: new URL('@/assets/login-bg-1.jpg', import.meta.url).href
    },
    {
      name: '商务主题', 
      bg: new URL('@/assets/login-bg-2.jpg', import.meta.url).href
    },
    {
      name: '科技主题',
      bg: new URL('@/assets/login-bg-3.jpg', import.meta.url).href
    }
  ])
  
  const currentTheme = ref(0)
  const bgStyle = computed(() => ({
    backgroundImage: `url(${themes.value[currentTheme.value].bg})`
  }))
  
  const form = ref({
    username: 'admin',
    password: '123456'
  })
  
  const changeTheme = (index) => {
    currentTheme.value = index
  }
  
  const validate = () => {
    if (!form.value.username.trim()) {
      ElMessage.error('请输入用户名')
      return false
    }
    if (!form.value.password) {
      ElMessage.error('请输入密码')
      return false
    }
    return true
  }
  
  const handleLogin = async () => {
    if (!validate()) return
    
    let loadingInstance
    try {
      loadingInstance = ElLoading.service({
        lock: true,
        text: '登录中...',
        background: 'rgba(0, 0, 0, 0.7)'
      })
  
      await userStore.login(form.value)
      
      ElMessage.success('登录成功')
      await router.push(router.currentRoute.value.query.redirect || '/dashboard')
      
    } catch (error) {
      ElMessage.error(error.message)
    } finally {
      loadingInstance?.close()
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .login-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: background-image 0.5s ease;
  
    .login-mask {
      position: absolute;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.3);
    }
  
    .login-wrapper {
      position: relative;
      max-width: 1200px;
      margin: 0 auto;
      padding-top: 60px;
  
      .login-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 40px;
  
        .logo {
          color: #fff;
          font-size: 32px;
          text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
  
        .theme-switch {
          display: flex;
          gap: 10px;
  
          .theme-item {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            border: 2px solid #fff;
            background-size: cover;
            cursor: pointer;
            transition: transform 0.3s;
  
            &:hover {
              transform: scale(1.1);
            }
          }
        }
      }
  
      .login-box {
        width: 380px;
        margin-left: auto;
        border-radius: 12px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
        animation: slideIn 0.6s ease;
  
        :deep(.el-card__body) {
          padding: 40px 30px;
        }
  
        .login-title {
          font-size: 24px;
          color: #333;
          text-align: center;
          margin-bottom: 30px;
        }
  
        .login-btn {
          width: 100%;
          margin-top: 10px;
        }
  
        .login-footer {
          margin-top: 20px;
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
  
  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateY(50px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .el-input {
    transition: all 0.3s;
    
    &:hover {
      :deep(.el-input__wrapper) {
        box-shadow: 0 0 0 1px var(--el-color-primary) inset;
      }
    }
  }
  </style>